<template>
  <div class="management">
    <div class="mains_contain">
      <el-form :inline="true" :model="searchForm" size="small" label-width="80px">
        <el-form-item label="租户">
          <el-select v-model="searchForm.tenantId" clearable style="width: 200px" placeholder="请选择">
            <el-option :label="item.name" v-for="item in tenantList" :value="item.id" :key="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="设备标识">
          <el-input v-model="searchForm.nodeId" clearable placeholder="请输入设备标识" style="width: 200px" />
        </el-form-item>
        <el-form-item label="设备名称">
          <el-input v-model="searchForm.name" clearable placeholder="请输入设备名称" style="width: 200px" />
        </el-form-item>
        <el-form-item label="分组名称">
          <el-select v-model="searchForm.groupId" clearable placeholder="请选择分组" style="width: 200px">
            <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="节点类型">
          <el-select v-model="searchForm.nodeType" clearable placeholder="请选择节点类型" style="width: 200px">
            <el-option label="终端设备" value="ENDPOINT"></el-option>
            <el-option label="网关设备" value="GATEWAY"></el-option>
            <el-option label="未知设备" value="UNKNOW"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备状态">
          <el-select v-model="searchForm.status" clearable placeholder="请选择设备状态" style="width: 200px">
            <el-option label="在线" value="ONLINE"></el-option>
            <el-option label="离线" value="OFFLINE"></el-option>
            <el-option label="告警" value="WARNING"></el-option>
            <el-option label="未注册" value="INACTIVE"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" size="mini" @click="qureySearch" icon="el-icon-search">查询</el-button>
        </el-form-item>
      </el-form>

      <div class="contant" style="margin-top: 10px">
        <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" fit :max-height="maxHeight" border stripe size="mini" highlight-current-row
          :header-cell-style="{ background: '#e5e5e5', color: '#000' }">
          <!-- <el-table-column type="selection" label="全选" width="40" /> -->
          <!-- <el-table-column prop="deviceId" label="客户端ID" /> -->
          <!--<el-table-column prop="gatewayId" label="网关 ID" min-width="110" />-->
          <el-table-column prop="tenantTxt" label="租户" width="140" align="center" />
          <el-table-column prop="nodeId" label="设备标识" align="center">
            <template slot-scope="{ row }">
              <span v-if="row.nodeId && row.nodeId.length > 10">
                <el-popover placement="top-start" title="" max-width="500" trigger="hover">
                  <div>{{ row.nodeId }}</div>
                  <span slot="reference">
                    {{ row.nodeId.substr(0,10) + '...' }}
                  </span>
                </el-popover>
              </span>
              <span v-else>{{ row.nodeId }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="设备名称" align="center" min-width="140" />
          <el-table-column prop="siteName" label="站点名称" min-width="110" align="center" />
          <el-table-column prop="nodeType" label="节点类型" align="center">
            <template slot-scope="scope">
              <span style="color:#409eff" v-if="scope.row.nodeType == 'ENDPOINT'">终端设备</span>
              <span style="color:#409eff" v-if="scope.row.nodeType == 'GATEWAY'">网关设备</span>
              <span style="color:#409eff" v-if="scope.row.nodeType == 'UNKNOW'">未知设备</span>
            </template>
          </el-table-column>
          <el-table-column prop="protocolType" label="协议类型" align="center" />
          <el-table-column prop="status" label="设备状态" align="center">
            <template slot-scope="scope">
              <span style="color:#E6A23C" v-if="scope.row.status == 'INACTIVE'">未注册</span>
              <span style="color:#67C23A" v-else-if="scope.row.status == 'ONLINE'">在线</span>
              <span style="color:#F56C6C" v-else-if="scope.row.status == 'WARNING'">告警</span>
              <span style="color:#F56C6C" v-else-if="scope.row.status == 'OFFLINE'">离线</span>

            </template>
          </el-table-column>
          <el-table-column prop="mute" label="设备是否冻结" width="110" align="center">
            <template slot-scope="scope">
              <span style="color:#F56C6C" v-if="scope.row.mute == 'TRUE'">是</span>
              <span style="color:#67C23A" v-if="scope.row.mute == 'FALSE'">否</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" min-width="150" align="center">
          </el-table-column>
          <el-table-column label="操作" width="180" align="center" fixed="right">
            <template slot-scope="{ row }">
              <!-- <el-button type="primary" size="small" @click="handleInfo(row)" icon='el-icon-edit'>编辑</el-button> -->
              <el-button type="text" style="margin-right: 10px" size="small" @click="handleInfo(row)" icon="el-icon-view">设备详情</el-button>
              <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                  <el-button type="text" size="small">更多</el-button><i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :command="{ type: 'a', row: row }" v-has="['device:restart']">
                    <span>设备重启</span>
                  </el-dropdown-item>
                  <el-dropdown-item :command="{ type: 'b', row: row }" v-has="['device:sync']">
                    <span>同步设备信息</span>
                  </el-dropdown-item>
                  <el-dropdown-item :command="{ type: 'c', row: row }" v-has="['device:network']">
                    <span>网络信息接口查询</span>
                  </el-dropdown-item>
                  <el-dropdown-item :command="{ type: 'd', row: row }">
                    <span>SSH命令行</span>
                  </el-dropdown-item>

                </el-dropdown-menu>
              </el-dropdown>
              <!-- <el-button type="warning" size="small" :disabled="row.status != 'ONLINE'" @click="onRestart(row)" icon='el-icon-refresh'>设备重启</el-button>
            <el-button type="primary" size="small" :disabled="row.status != 'ONLINE'" @click="onSync(row)" icon='el-icon-view'>同步设备信息</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: right">
          <pagination v-show="pagination.total > 0" :limit.sync="pagination.pageSize" :page.sync="pagination.page" :total="pagination.total" @pagination="getPageList" />
        </div>
      </div>
    </div>
    <el-dialog title="命令下发" :visible.sync="dialogVisible" width="640px" :close-on-click-modal="false">
      <el-form ref="addForm" :model="form" label-width="100px" size="small" :rules="rules">
        <el-form-item label="下发Topic" prop="topic">
          <el-input v-model="form.topic" clearable />
        </el-form-item>
        <el-form-item label="下发报文" prop="body">
          <el-input type="textarea" v-model="form.body" clearable />
        </el-form-item>
      </el-form>

      <div style="text-align: right">
        <el-button type="primary" @click="handleSave" size="small">保存</el-button>
        <el-button @click="dialogVisible = false" size="small">取消</el-button>
      </div>
    </el-dialog>

    <div class="showPo" v-show="dialog.visible">
      <div style="text-align: center">
        <div class="bg1">
          <div class="aaa-bgg"></div>
        </div>
        <div class="showPo_tip">
          <div class="showPo_tip_one">设备正在{{ curRemark }}中</div>
          <h3 class="showPo_tip_two">{{ curRemark }}时需要一点时间，请稍后</h3>
        </div>
        <div class="poBtnC">
          <div class="poBtn" :title="`取消${curRemark}`" @click="cancelPd">
            取消{{ curRemark }}
          </div>
        </div>
      </div>
    </div>
    <div class="showPo" v-show="dialog.failVisible">
      <div style="text-align: center; padding-top: 30px; width: 400px">
        <div class="showPo_tip">
          <h1 style="color: red">已超时,{{ curRemark }}失败</h1>
        </div>
        <div class="poBtnC">
          <div class="poBtn" @click="comfirmFail">确定</div>
        </div>
      </div>
    </div>
    <div class="showPo" v-show="dialog.sucssVisible">
      <div style="text-align: center; padding-top: 30px; width: 400px">
        <div class="showPo_tip">
          <h1 style="color: #67c23a">{{ curRemark }}成功</h1>
        </div>
        <div class="poBtnC">
          <div class="poBtn" @click="comfirmSucss">确定</div>
          <div class="poBtn" @click="handleSee" v-if="curRemark == '网络信息接口查询'">
            查看详情
          </div>
        </div>
      </div>
    </div>
    <div class="showPo" v-show="dialog.comfirmVisible">
      <div style="text-align: center; padding-top: 30px; width: 400px">
        <div class="showPo_tip">
          <div class="showPo_tip_one">{{ curRemark }}通知</div>
          <h3 class="showPo_tip_two">{{ curRemark }}已完成</h3>
          <div class="showPo_tip_two" v-if="curRemark != '重启' && curRemark != '同步'">
            <span style="margin-right: 20px">设备名称：<span style="color: #409eff">{{
                seeStatus.name
              }}</span></span>
            <span style="margin-right: 20px">CPU使用率：<span style="color: #66c239">{{
                seeStatus.cpuUsage
              }}</span></span>
            <span>内存使用率：<span style="color: red">{{
                seeStatus.memoryUsage
              }}</span></span>
          </div>
        </div>
        <div class="poBtnC">
          <div class="poBtn" @click="comfirmPd">确定</div>
        </div>
      </div>
    </div>
    <!-- <div class="showPo" v-show="dialog.xtermVisible">
      <div class="xtermBox">
        <e class="el-icon-circle-close" @click="closeTerm" />
        <div id="xterm" />
      </div>
    </div> -->
    <el-dialog title="登录到服务器" :visible.sync="xtermVisible" width="500px" :close-on-click-modal="false">
      <el-form :model="sshForm" size="small" label-width="80px">
        <el-form-item label="账号">
          <el-input v-model="sshForm.name" clearable placeholder="请输入账号" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="sshForm.pwd" clearable placeholder="请输入密码" />
        </el-form-item>
        <div style="text-align: right">
          <el-button type="primary" @click="isSave" size="small">保存</el-button>
          <el-button @click="isClose" size="small">取消</el-button>
        </div>
      </el-form>
    </el-dialog>
    <!-- 网络接口查询 -->
    <el-dialog title="网络接口查询返回数据" :visible.sync="netVisible" width="80%" :close-on-click-modal="false">
      <template>
        <el-table :data="networkInfoList" size="mini" border style="width: 100%">
          <el-table-column prop="interfaceName" label="名称"> </el-table-column>
          <el-table-column prop="interfaceAdminStatus" label="物理状态">
          </el-table-column>
          <el-table-column prop="interfaceOperStatus" label="协议状态">
          </el-table-column>
          <el-table-column prop="physicalDuplex" label="双工模式">
          </el-table-column>
          <el-table-column prop="physicalSpeed" label="带宽"> </el-table-column>
          <el-table-column prop="hardwareIccid" label="集成电路卡识别码">
          </el-table-column>
          <el-table-column prop="hardwareImei" label="国际移动设备识别码">
          </el-table-column>
          <el-table-column prop="hardwareImsi" label="国际移动用户识别码">
          </el-table-column>
          <el-table-column prop="hardwareModemName" label="LTE-型号">
          </el-table-column>
          <el-table-column prop="hardwareModemType" label="模块类型">
          </el-table-column>
          <el-table-column prop="hardwareMsisdn" label="移动台国际ISDN号码">
          </el-table-column>
          <el-table-column prop="networkCellId" label="小区编号">
          </el-table-column>
          <el-table-column prop="networkCode" label="移动网络码">
          </el-table-column>
          <el-table-column prop="networkCountryCode" label="移动国家码">
          </el-table-column>
          <el-table-column prop="networkLocationAreaCode" label="本地区域码">
          </el-table-column>
          <el-table-column prop="networkMode" label="网络类型">
          </el-table-column>
          <el-table-column prop="networkOperatorInfo" label="运营商信息">
          </el-table-column>
          <el-table-column prop="networkRoamingStatus" label="漫游状态">
          </el-table-column>
          <el-table-column prop="networkServiceStatus" label="服务状态">
          </el-table-column>
          <el-table-column prop="networkServiceType" label="服务类型">
          </el-table-column>
          <el-table-column prop="radioRscp" label="导频信道质量">
          </el-table-column>
          <el-table-column prop="radioRscp" label="接收信号码功率">
          </el-table-column>
          <el-table-column prop="radioRsrp" label="基准信号接收功率">
          </el-table-column>
          <el-table-column prop="radioRsrq" label="基准信号接收质量">
          </el-table-column>
          <el-table-column prop="radioRssi" label="接收信号强度指示">
          </el-table-column>
          <el-table-column prop="radioSinr" label="信号噪声干扰比">
          </el-table-column>
          <el-table-column prop="profileId" label="模板ID值"> </el-table-column>
          <el-table-column prop="profileName" label="带宽"> </el-table-column>
          <el-table-column prop="profileStatus" label="双工模式">
          </el-table-column>
          <el-table-column prop="profileType" label="PDP类型">
          </el-table-column>
          <el-table-column prop="simId" label="SIM卡ID"> </el-table-column>
          <el-table-column prop="simStatus" label="SIM卡状态">
          </el-table-column>
        </el-table>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import * as api from "@/api/link/device";
import * as apiGroupDevice from "@/api/link/deviceGroup";
import * as apiDownRecord from "@/api/link/downRecord";
import * as tenantApi from "@/api/sys/tenant";


export default {
  comments: {},
  props: {},
  data() {
    return {
      xtermVisible: false,
      sshForm: {},
      term: null,
      fitAddon: null,
      tenantList: [],
      curRow: null,
      curRemark: "重启",
      searchForm: {},
      searchTime: [],
      groupList: [],
      multipleSelection: [],
      tableData: [],
      pagination: {
        total: 1,
        page: 1,
        pageSize: 10,
      },
      form: {},
      dialogVisible: false,
      rules: {
        topic: [{ required: true, message: "必须输入topic", trigger: "blur" }],
        body: [{ required: true, message: "必须输入报文", trigger: "blur" }],
      },
      dialog: {
        visible: false,
        comfirmVisible: false,
        cancelVisible: false,
        failVisible: false,
        sucssVisible: false,
        xtermVisible: false,
      },
      autoInterval: null,
      autoTimeOut: null,
      seeStatus: {
        name: "",
        cpuUsage: "",
        memoryUsage: "",
      },
      networkInfoList: [],
      netVisible: false,
    };
  },
  computed: {
    maxHeight() {
      var curHeight =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;
      return curHeight - 280;
    },
  },
  created() {
    this.groupPage();
    this.getTenantList();

    // this.searchForm.groupName = this.$route.query.groupName
  },
  mounted() {
    // this.initTerm()

    let f = localStorage.getItem('forms')
    if (f) {
      this.searchForm = JSON.parse(f)
      this.pagination.pageSize = this.searchForm.pageSize
      this.pagination.page = this.searchForm.page
      this.pagination.current = this.searchForm.current
      this.pagination.total = this.searchForm.total
      this.getPageList();
    } else {
      this.getPageList();
    }
  },
  beforeRouteLeave(to, from, next) {
    if (to.name == 'deviceInfo') {
      let form = this.searchForm
      localStorage.setItem('forms', JSON.stringify(form))
      next()
    } else {
      let f = localStorage.getItem('forms')
      if (f) {
        localStorage.removeItem('forms')
      }
      next()
    }
  },
  methods: {
    isClose() {
      this.xtermVisible = false;
      this.sshForm = {}
    },
    isSave() {
      let routeData = this.$router.resolve({
        path: "/sshWeb",
        query: { name: this.sshForm.name },
      });
      window.open(routeData.href, '_blank');
      this.xtermVisible = false
      this.sshForm = {}
      return
      this.$router.push({ path: '/sshWeb', query: { name: this.sshForm.name } })
    },
    // 获取租户数据
    getTenantList() {
      tenantApi.queryIdNamePair().then((res) => {
        this.tenantList = res.data;
      });
    },
    handleCommand(command) {
      switch (command.type) {
        case "a":
          this.onRestart(command.row);
          break;
        case "b":
          this.onSync(command.row);
          break;
        case "c":
          this.onNetworkInfo(command.row);
          break;
        case "d":
          console.log(command, 'command');
          if (command.row.status == "OFFLINE" || command.row.status == 'INACTIVE') {
            this.$message({
              type: 'warning',
              message: '设备不在线或未注册！'
            })
          } else {
            this.xtermVisible = true
          }

          break;
      }
    },
    cancelPd() {
      this.dialog.visible = false;
      if (this.autoInterval) {
        clearInterval(this.autoInterval);
      }
      if (this.autoTimeOut) {
        clearTimeout(this.autoTimeOut);
      }
    },
    comfirmPd() {
      // 
      this.$router.push({
        path: "/deviceInfo",
        query: { deviceId: this.curRow.deviceId, nodeId: this.curRow.nodeId, tenantId: this.curRow.tenantId },
      });
      this.dialog.comfirmVisible = false;
      if (this.autoInterval) {
        clearInterval(this.autoInterval);
      }
      if (this.autoTimeOut) {
        clearTimeout(this.autoTimeOut);
      }
    },
    comfirmFail() {
      this.dialog.failVisible = false;
      if (this.autoInterval) {
        clearInterval(this.autoInterval);
      }
      if (this.autoTimeOut) {
        clearTimeout(this.autoTimeOut);
      }
    },
    comfirmSucss() {
      if (this.curRemark == "重启") {
        //设备重启成功-跳转设备操作日志页面
        this.$router.push("/operationLog");
      }
      this.dialog.sucssVisible = false;
      if (this.autoInterval) {
        clearInterval(this.autoInterval);
      }
      if (this.autoTimeOut) {
        clearTimeout(this.autoTimeOut);
      }
    },
    // 网络接口查询
    handleSee() {
      this.netVisible = true;
    },
    // 复选框事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getPageList() {
      this.search();
    },
    search() {
      const p = Object.assign(this.searchForm, this.pagination);
      if (this.searchTime.length > 0) {
        p.startTime = this.searchTime[0];
        p.endTime = this.searchTime[1];
      }
      api.page(p).then((resp) => {
        this.tableData = resp.data.list;
        this.pagination = resp.data.pagination;
        this.pagination.page = resp.data.pagination.current;
      });
    },
    qureySearch() {
      const p = Object.assign({}, this.searchForm, { pageSize: this.pagination.pageSize, page: this.pagination.page });
      if (this.searchTime.length > 0) {
        p.startTime = this.searchTime[0];
        p.endTime = this.searchTime[1];
      }

      api.page(p).then((resp) => {
        this.tableData = resp.data.list;
        this.pagination = resp.data.pagination;
        this.pagination.page = resp.data.pagination.current;
      });
    },
    groupPage() {
      const p = Object.assign({}, { page: 1, pageSize: 200 });
      apiGroupDevice.list(p).then((resp) => {
        this.groupList = resp.data;
      });
    },

    handleInfo(row) {
      this.$router.push({
        path: "/deviceInfo",
        query: row,
      });
    },
    // 设备重启--命令下发接口
    async onRestart(row) {
      this.curRow = row;
      this.curRemark = "重启";
      var p = {
        iotDevices: [
          {
            clientId: row.deviceId,
            nodeId: row.nodeId,
          },
        ],
        tenantId: row.tenantId,
      };
      var resp_one = await api.commandIssue(p);
      var parmas = {
        messageId: resp_one.data.messageId,
      };
      //开始盘点后每2秒获取一次最新数据
      this.dialog.visible = true;
      this.autoInterval = setInterval(() => {
        this.doStart(parmas, (data) => {
          if (data) {
            this.doDone();
          }
        });
      }, 2000);

      //20之后结束盘点
      this.autoTimeOut = setTimeout(() => {
        this.timeOut();
      }, 1000 * 60 * 5);
    },
    // 设备重启 page 接口
    async doStart(parmas, callback) {
      let resp = await api.commandIssueResp(parmas);
      if (resp.data.list.length) {
        callback(true);
      } else {
        callback(false);
      }
    },
    // 超时，重启失败
    timeOut() {
      // this.$message.error('已超时，重启失败！！');
      this.dialog.visible = false;
      this.dialog.failVisible = true;
      if (this.autoInterval) {
        clearInterval(this.autoInterval);
      }
    },
    // 关闭弹窗和循环语句
    doDone() {
      this.dialog.visible = false;
      this.dialog.failVisible = false;
      this.dialog.sucssVisible = true;
      if (this.autoInterval) {
        clearInterval(this.autoInterval);
      }
      if (this.autoTimeOut) {
        clearTimeout(this.autoTimeOut);
      }
    },
    doDoneStatus() {
      this.dialog.visible = false;
      this.dialog.failVisible = false;
      this.dialog.comfirmVisible = true;
      if (this.autoInterval) {
        clearInterval(this.autoInterval);
      }
      if (this.autoTimeOut) {
        clearTimeout(this.autoTimeOut);
      }
    },

    // 设备同步
    async onSync(row) {
      this.curRow = row;
      this.dialog.visible = true;
      this.curRemark = "同步";
      var p = {
        iotDevices: [
          {
            clientId: row.deviceId,
            nodeId: row.nodeId,
          },
        ],
        tenantId: row.tenantId,
      };
      var resp_one = await api.syncCommandIssue(p);
      if (!resp_one.data) {
        this.dialog.visible = false;
        this.$notify.error({
          title: "错误",
          message: "同步设备信息命令返回数据有问题，请检查！",
        });
        return;
      }
      var parmas = {
        messageId: resp_one.data.messageId,
      };
      //开始盘点后每2秒获取一次最新数据
      this.dialog.visible = true;
      this.autoInterval = setInterval(() => {
        this.doStartStatus(parmas, (data) => {
          if (data) {
            this.doDoneStatus();
          }
        });
      }, 2000);

      //20之后结束
      this.autoTimeOut = setTimeout(() => {
        this.timeOut();
      }, 1000 * 60 * 5);
    },
    // 设备同步page 接口
    async doStartStatus(parmas, callback) {
      let resp = await api.commandIssueRespResult(parmas);
      if (resp.data.list.length) {
        this.seeStatus = Object.assign(resp.data.list[0]);
        callback(true);
      } else {
        callback(false);
      }
    },

    // 网络信息接口查询
    async onNetworkInfo(row) {
      this.curRow = row;
      this.dialog.visible = true;
      this.curRemark = "网络信息接口查询";
      var p = {
        iotDevices: [
          {
            clientId: row.deviceId,
            nodeId: row.nodeId,
          },
        ],
        tenantId: row.tenantId,
      };
      var resp_one = await api.networkInfoCommandIssue(p); //执行网络信息接口查询
      if (!resp_one.data) {
        this.dialog.visible = false;
        this.$notify.error({
          title: "错误",
          message: "网络信息接口查询返回数据有问题，请检查！",
        });
        return;
      }

      var parmas = {
        messageId: resp_one.data.messageId,
      };
      //开始盘点后每2秒获取一次最新数据
      this.dialog.visible = true;
      this.autoInterval = setInterval(() => {
        this.doStartNetwork(parmas, (data) => {
          if (data) {
            this.doDone();
          }
        });
      }, 2000);

      //20之后结束
      this.autoTimeOut = setTimeout(() => {
        this.timeOut();
      }, 1000 * 60 * 5);
    },

    // 网络接口查询 --命令下发
    async doStartNetwork(parmas, callback) {
      let resp = await api.getByMessageId(parmas.messageId);
      if (resp.data.length) {
        this.networkInfoList = resp.data;
        callback(true);
      } else {
        callback(false);
      }
    },

    handleCommandBatch() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: "请勾选数据",
          type: "warning",
        });
        return;
      }
      let deviceIds = [];
      for (let i = 0; i < this.multipleSelection.length; i++) {
        deviceIds.push(this.multipleSelection[i].deviceId);
      }
      this.dialogVisible = true;
      this.form.deviceId = [];
      this.form.deviceId.push(deviceIds);
    },
    handleSave() {
      let map = {
        deviceId: this.form.deviceId.join(","),
        topic: this.form.topic,
        body: this.form.body,
      };
      apiDownRecord.save(map).then((resp) => {
        if (resp.code === 200) {
          this.dialogVisible = true;
          this.$message({
            showClose: true,
            message: "命令下发成功",
            type: "success",
          });
        }
      });
    },
  },
  destroyed() {
    if (this.autoInterval) {
      clearInterval(this.autoInterval);
    }
    if (this.autoTimeOut) {
      clearTimeout(this.autoTimeOut);
    }
    // let f = localStorage.getItem('forms')
    // if (f) {
    //   localStorage.removeItem('forms')
    // }
  },
};
</script>

<style scoped lang="scss">
.management {
  padding: 20px;
  .curHeader {
    position: relative;
    height: 40px;
    .searcherBox {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
}

.showPo {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  z-index: 9;
}
.showPo > div {
  width: 300px;
  background: white;
  padding-bottom: 20px;
  border-radius: 20px;
}
.showPo div {
  font-size: 12px;
}

.bg1 {
  display: flex;
  align-content: center;
  align-items: center;
  justify-items: center;
  justify-content: center;
  position: relative;
}
.aaa-bgg {
  margin-top: 20px;
  background-image: url("../../assets/images/13.gif");
  width: 250px;
  height: 115px;
  background-size: 100% 100%;
}
.poBtnC {
  margin-top: 30px;
  display: flex;
  align-content: center;
  align-items: center;
  justify-items: center;
  justify-content: center;
  margin-bottom: 10px;
  .poBtn {
    min-width: 120px;
    padding: 0 10px;
    border-radius: 20px;
    background: #3267d5;
    color: white;
    height: 35px;
    line-height: 35px;
    cursor: pointer;
  }
}

.showPo_tip {
  .showPo_tip_one {
    font-size: 22px;
    color: #323232;
  }
  .showPo_tip_two {
    margin-top: 25px;
    font-size: 18px;
    color: #3267d5;
  }
}
</style>


<style lang="scss" scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.xtermBox {
  /* padding:0!important;
  border: 1px solid #666 !important;
  border-radius: 5px !important; */
  background: transparent !important;
  width: 640px !important;
  height: 384px !important;
  position: relative;
  /* display: flex;
  align-content: center;
  justify-items: center; */
}
.el-icon-circle-close {
  position: absolute;
  right: -20px;
  top: -20px;
  font-size: 20px;
  cursor: pointer;
}
#xterm {
  margin: 10 auto;
  width: 640px;
  height: 384px;
}
</style>
